<style scoped lang="scss">
.el-input{
  width: 200px;
}
</style>
<template>
  <div class='public_page'>
    <el-form inline :model="searchParams" ref="refSearchParams">
      <el-form-item label="出通单号">
        <el-input v-model="searchParams.shippingOrderNumber" placeholder="请输入出通单号" clearable @clear="getTableList"/>
      </el-form-item>
<!--      <el-form-item label="物流公司">-->
<!--        <el-input v-model="searchParams.companyName" placeholder="请输入物流公司" clearable />-->
<!--      </el-form-item>-->
      <el-form-item label="物流公司">
        <el-select v-model="searchParams.companyName" filterable placeholder="请输入物流公司" clearable @clear="getTableList">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchTableList">搜 索</el-button>
      </el-form-item>
    </el-form>
    <el-table style="height: 100%;" v-loading="loading" v-on="tableEvent" v-bind="propsRes.table">
      <el-table-column align="center" show-overflow-tooltip prop="companyName" min-width="180px" label="物流公司"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="150px" label="出通单号">
        <template #default="scope">
          <el-button link @click="openDetail(scope.row.shippingOrderNumber)" type="primary">{{scope.row.shippingOrderNumber}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip min-width="150px" label="到货时间 / 签收时间">
        <template #default="scope">
          <span v-if="scope.row.arrivalTime || scope.row.getTime">
            {{ scope.row.arrivalTime }}/{{ scope.row.getTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="evaluator" min-width="150px" label="评价人"></el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="overallScore" min-width="150px" label="总体评分">
        <template #default="{ row }">
          <el-rate v-model="row.overallScore" disabled text-color="#ff9900" />
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="commentContent" min-width="150px" label="评价内容"></el-table-column>
    </el-table>
    <div class="public_pagination">
      <el-pagination v-bind="propsRes.pagination" v-on="paginationEvent" />
    </div>
    <showDetail ref="showDetailFormRef" @updateList="getTableList"></showDetail>
  </div>
</template>

<script setup>
import useTableProps from '@/hooks/tableList'
import {evaluationFindPage} from '@/api/evaluationManage.js'
import {postDeliverPageCompanyInformation} from "@/api/deliveryOrder.js";
import showDetail from "@/views/components/showDetail.vue";
const refSearchParams = ref(null)
const showDetailFormRef = ref(null)
const searchParams = reactive({
  shippingOrderNumber: '',
  companyName: ''
})

const options = []

const { loading, propsRes, tableEvent, paginationEvent, tableRef, searchTableList, getTableList } = useTableProps({
  searchParams,
  url: evaluationFindPage
})

const openDetail = (shippingOrderNumber) => {
  showDetailFormRef.value.getParent(shippingOrderNumber)
  console.log(shippingOrderNumber);
}

const getDeliverList = async () => {
  try {
    const res = await postDeliverPageCompanyInformation({})
    res.data.forEach(item => {
      options.push({
        value: item.companyName,
        label: item.companyName
      })
    })
  }
  catch (err){
    console.log(err);
  }
}

onMounted(() => {
  getDeliverList()
  getTableList()
})
</script>

